<template>
	<view class="content">
		<view class="statusbar">
			<view class="statItem">
				<view class="itemicon">1</view>
				<text>下单</text>
			</view>
			<view class="line">
				
			</view>
			<view class="statItem">
				<view class="itemicon">2</view>
				<text>商户确认</text>
			</view>
			<view class="line">
				
			</view>
			<view class="statItem">
				<view class="itemicon">3</view>
				<text>确认订单</text>
			</view>
			<view class="line">
				
			</view>
			<view class="statItem">
				<image src="../../static/xiadan_icon_pay.png" mode="scaleToFill" class="surepay"></image>
				<text>支付</text>
			</view>
		
		</view>
		<view class="body_c">
			<view class="body_header">
				<text class="bodyheader_l">点单(4)</text>
				<text class="bodyheader_r">当前：小桌01</text>
			</view>
			<view class="dish" v-for="(item,index) in [1,2,3]">
				<image src="../../static/header.png" mode="scaleToFill" class="dish_pic"></image>
				<view class="dish_r">
					<text class="dish_name">西冷牛排西冷牛排西冷牛排西冷牛西...</text>
					<text class="dish_dw">份</text>
					<text class="dish_dw">不要辣</text>
					<view class="dish_bt">
						<text class="dish_dw">X1</text>
						<view class="dish_rt">
							<text class="vprice">￥50</text>
							<text class="mprice">￥80</text>
						</view>
					</view>
				</view>
			</view>
			<view class="sgview">
				<view class="total_view">
					100
				</view>
				<view class="discontview">
					<view class="vipsicon">
						注册会员
					</view>
					<text>已优惠￥100</text>
				</view>
			</view>
		</view>
		<view class="remark">
			<text>备注</text>
			<input type="text"  class="remarkipt" placeholder="请输入订单备注" />
		</view>
		
		<view class="tbar">
			<text class="tbar_l">小计</text>
			<text class="tbar_c">200</text>
			<view class="tbtn">
				下单
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				barstatus: [{
						stag: 1,
						name: '下单'
					},
					{
						stag: 2,
						name: '商户确认'
					}, {
						stag: 3,
						name: '确认订单'
					}, {
						stag: '4',
						name: '支付'
					}
				]
			}
		}
	}
</script>

<style>
	page{
		background-color: #F7F7F7;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	.statusbar {
		width: 100%;
		position: fixed;
		display: flex;
		flex-direction: row;
		box-sizing: border-box;
		padding: 40rpx 52rpx;
		align-items: flex-start;
		background-color: #FFFFFF;
		z-index: 100;
	}

	.statItem {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.statItem text{
		font-size:26rpx;
		font-family:PingFang SC;
		font-weight:400;
		line-height:40rpx;
		color:rgba(51,51,51,1);
		margin-top: 7rpx;
	}

	.itemicon {
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		color: #FFFFFF;
		line-height: 48rpx;
		text-align: center;
		font-size: 24rpx;
		background: linear-gradient(92deg, rgba(255, 80, 114, 1) 0%, rgba(255, 138, 128, 1) 100%);
		box-shadow: 0px 10rpx 3rpx   rgba(255,136,128,0.5);/*阴影出现在元素下方*/
	}
	
	.itemname {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: rgba(51, 51, 51, 1);
		margin-top: 10rpx;
	}

	.line {
		flex-grow: 1;
		border-bottom: 1rpx dotted #FF5072;
		margin-top: 24rpx;

	}
	.surepay{
		width: 64rpx;
		height: 64rpx;
	}
	.body_c{
		
		width: 690rpx;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		margin-top: 220rpx;
		border-radius:16px;
		box-sizing: border-box;
		padding: 0rpx 30rpx;
	}
	.body_header{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
		border-bottom: 1rpx solid #F7F7F7;
	}
	.bodyheader_l{
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
	}
	.bodyheader_r{
		font-size:24rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
	}
	.dish{
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		margin-top: 35rpx;
		width: 100%;
	}
	.dish_pic{
		width: 140rpx;
		height: 140rpx;
	}
	.dish_r{
		flex: 1 1 0%;
		display: flex;
		flex-direction: column;
		margin-left: 10rpx;
	}
	.dish_name{
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
	}
	.dish_dw{
		font-size:20rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(153,153,153,1);
		margin-top: 15rpx;
	}
	.dish_bt{
		margin-top: 15rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}
	.dish_rt{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	.vprice{
		font-size:32rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
		text-align: right;
	}
	.vprice::before{
		content: '会员价';
		font-size:22rpx;
		font-family:PingFang SC;
		font-weight:500;
		line-height:40rpx;
		color:rgba(255,80,114,1);
	}
	.mprice{
		font-size:20rpx;
		font-family:PingFang SC;
		font-weight:400;
		line-height:40rpx;
		color:rgba(153,153,153,1);
		text-decoration: line-through;
	}
	.sgview{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		
		box-sizing: border-box;
		padding: 30rpx 0rpx;
		border-top: 1rpx solid #F7F7F7;
		
	}
	.total_view{
		font-size:40rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
	}
	.total_view::before{
		content: "小计￥";
		font-size: 24rpx;
		
	}
	.discontview{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 15rpx;
	}
	.vipsicon{
		width:134rpx;
		line-height: 44rpx;
		border:1rpx solid rgba(212,119,37,1);
		opacity:0.5;
		border-radius:22rpx;
		text-align: center;
		font-size:24rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(212,119,37,1);
	}
	.discontview text{
		font-size:24rpx;
		font-family:PingFang SC;
		font-weight:400;
		margin-left: 20rpx;
		color:rgba(153,153,153,1);
	}
	.remark{
		margin-bottom: 160rpx;
		margin-top: 20rpx;
		width:690rpx;
		height:98rpx;
		background:rgba(255,255,255,1);
		opacity:1;
		border-radius:16rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.remark text{
		margin-left: 30rpx;
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
	}
	.remarkipt{
		text-align: right;
		margin-right: 30rpx;
		font-size: 28rpx;	
		
	}
	.tbar{
		position: fixed;
		left: 0rpx;
		bottom: 0rpx;
		width:750rpx;
		height:98rpx;
		background:rgba(255,255,255,1);
		opacity:1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		z-index: 100;
	}
	.tbar_l{
		font-size:24rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
		margin-right: 10rpx;
	}
	.tbar_c{
		font-size:40rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(255,80,114,1);
		margin-right: 33rpx;
		
	}
	.tbar_c::before{
		content: '￥';
		font-size: 24rpx;
	}
	.tbtn{
		width:280rpx;
		line-height:98rpx;
		background:linear-gradient(92deg,rgba(255,80,114,1) 0%,rgba(255,138,128,1) 100%);
		opacity:1;
		font-size:32rpx;
		font-family:PingFang SC;
		font-weight:bold;
		text-align: center;
		color:rgba(255,255,255,1);
	}
</style>
